import React, {useEffect, useRef} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Animated,
  TouchableOpacity,
  Text,
} from 'react-native';

const 平移动画多种属性_Animated_decay衰减动画函数9_4 = () => {
  const marginLeft = useRef(new Animated.Value(0)).current;

  const pressOut = () => {
    console.log('onPressOut ...');
    marginLeft.setValue(0);
  };

  useEffect(() => {
    console.log(marginLeft, '\t----marginLeft');

    return () => {};
  }, [marginLeft]); //useRef的东西不会产生副作用，在React中，useRef创建的引用并不会触发组件的重新渲染，因此也不会触发useEffect。useRef主要用于访问和修改DOM元素，或者保存任何可变值，而这些值的变化不会导致组件重新渲染。所以，当useRef的值改变时，useEffect不会产生副作用。

  /* 除了props和state的变化之外，以下情况也会触发useEffect的执行：
1. 组件首次渲染：当组件首次渲染时，useEffect会被执行。这是因为useEffect的默认行为就是在每次渲染后运行。
2. useEffect的依赖数组变化：如果useEffect的依赖数组中的值发生变化，那么useEffect就会执行。如果没有提供依赖数组，那么useEffect会在每次渲染后执行。
3. 组件重新渲染：无论何时组件重新渲染，无论是由于state变化，props变化，或者父组件导致的重新渲染，useEffect都会执行。
4. 手动触发：可以通过在组件内部手动调用setState或forceUpdate等方法来触发组件的重新渲染，从而触发useEffect的执行。
请注意，虽然useRef的值改变不会触发useEffect，但是你可以在useEffect中访问和修改useRef的值。 */

  console.log('----------组件执行——————————');
  return (
    <View style={styles.root}>
      <TouchableOpacity
        style={styles.button}
        activeOpacity={0.8} // x ~ 1不透明度变化范围
        onPressOut={pressOut}>
        <Text style={styles.txt}>按钮 reset</Text>
      </TouchableOpacity>
      <Button
        title="按钮"
        onPress={() => {
          /* ------9_4时间动画函数的平移动画- */
          // Animated.timing(marginLeft, {
          //   toValue: 100,
          //   duration: 500,
          //   useNativeDriver: false,
          // }).start();

          /* ------9_5衰减动画函数- */
          Animated.decay(marginLeft, {
            // velocity: 初始速度。必需。
            // deceleration: 衰减系数。默认值 0.997。
            velocity: 1,
            deceleration: 0.997, //衰减系数越小停下的越快，也就走的越近
            useNativeDriver: false,
          }).start();
        }}
      />
      <Animated.View
        style={[
          /* --平移的属性 */
          styles.view,
          // {marginTop: marginLeft},
          {transform: [{translateX: marginLeft}]},
          {
            // position: 'absolute',
            // top: marginLeft,
            // left: marginLeft,
          },
        ]}
      />
    </View>
  );
};

export default 平移动画多种属性_Animated_decay衰减动画函数9_4;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 300,
    backgroundColor: 'white',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#3050ff',
    marginTop: 20,
  },
  button: {
    marginLeft: 'auto',
    width: 100,
    borderRadius: 10,
    height: 36,
    backgroundColor: '#2030FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});
